BEEK'S WEB ONBOARDING
Starting waves of engagement
Crafting the onboarding experience for Beek's web application.
Context
In 2021, we were developing a crucial user flow at Beek, the onboarding process. This flow had a significant impact on both users and the business within the application. However, the web version of this flow was missing, presenting an opportunity to improve retention and encourage users to continue with us beyond their trial period. This enhancement would benefit both the users and the business, given the medium through which users subscribe.
Challenge
Implementing an onboarding flow in its web version to achieve a better user experience while simultaneously impacting the business through the subscription process, which would now be possible on the web.
From a UX/UI design perspective, the challenge was to conceptualize this experience, similar to the app but on different dimensions, with new interactions, and additional edge cases.
There was also a personal challenge due to the team's communication transitioning from Spanish to English, at least in the areas I was working on. Ultimately, this change greatly contributed to my professional growth.
My Role
Lead user experience design and user interface design. Carry out usability testings along the UX Researcher.
Tools
Figma
Notion
Zoom
Design Process
Research
Initially, we revisited the information and data related to the onboarding implemented in the application, along with the benefits it brought in terms of retention and user experience. This approach ensured that users wouldn't encounter an empty library upon accessing the app. Instead, they would find content of interest and a daily goal motivating them to engage and achieve sustained retention.
Furthermore, we conducted a desk research, observing the approaches taken by different companies in a similar market to maintain certain patterns, aiming to make this flow more intuitive for our users to complete successfully.
Ideation
Upon combining the information from the previous onboarding and the desk research, we chose to retain a similar flow to that of the application, gradually initiating experiments to enhance the experience.
During this phase, I collaborated closely with the content team to objectively select the material to be presented to users during the onboarding process. The chosen content was based on what was most listened to up to that point (early 2022).
Wireframes
I began working ong the site's information architecture which. As the application's architecture was already user-friendly, I kept the design similar to ensure ease of use for existing users but also for the new ones. After that, I created low-fidelity wireframes and used them to develop a proposal to present it to the stakeholders.
User interface and flow
1.Goal page
This is the page where users begin by selecting their goal, with these goals being based on the users' main areas of interest. It's worth mentioning that in this version of the onboarding, I decided to include a progress bar to provide users with more context about where they are in the flow.
2.Content page
On this page, users select the content they are interested in listening to. In this way, there is an initial hook, as users already have content to listen to as soon as they arrive at the application. This has greatly contributed to user retention in their first week.
3.Inspirational page
On this page, a testimonial is presented to the user to build empathy and convey the value proposition of 'Learning anytime through listening.' Depending on the goal users have chosen, the testimonial changes (business, health, spirituality, etc.), aligning the message with the selected goal to maintain a consistent narrative.
4.Daily goal page
In this step of the flow, the user selects a daily goal. By default, the goal is set to 15 minutes, as this duration was the average length of the original content of interest to showcase in the company, it's also a standard time (neither too short nor too long) for users who are new to audio-based learning. This way, different objectives would be achieved:
- Users would complete their daily goal quickly, in other words, they would receive their reward very soon, thus completing the Hook model.
- Due to its brevity, they could consume more content and therefore retain information better.
5.Summary page
This is the final screen of the flow, where users are shown a summary of the goal they want to achieve and the content they will listen to.
Learnings
- I emphasized the impact that generating a better user experience can have on the business.
- I managed to learn different design concepts because I worked on the project closely with two people from the development team, who had previously worked at Facebook and shared their design knowledge with me.
- I understood the importance of delivering my designs with notes and being as specific as possible with the development team.
Shout outs!
Thank you very much to Nich Osborn and Robert Lynch (Senior Devs) for all the support I received on this project. Also, thanks to Emir Saldierna (Head of Design), who at one point supported me in continuing part of the project. And special thanks to Guillermo Sequeira, CPO of Beek.